<template>
    <div class="app-preset-rowitem">
        <app-rawitem :rawItemDetail="rawItemDetail" :contentType="contentType" :imgUrl="value" :content="contentValue">
        </app-rawitem>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';

@Component({})
export default class AppPreSetRowItem extends Vue {

    /**
     * 父项所有数据
     *
     * @type {*}
     * @memberof AppPreSetRowItem
     */
    @Prop() public contextData?: any;

    /**
     * 输入值
     *
     * @type {*}
     * @memberof AppPreSetRowItem
     */
    @Prop() public value!: any;

    /**
     * 名称
     *
     * @type {string}
     * @memberof AppPreSetRowItem
     */
    @Prop() public name!: string;

    /**
     * 类型
     *
     * @type {string}
     * @memberof AppPreSetRowItem
     */
    @Prop() public type?: string;

    /**
     * 直接内容详情
     *
     * @type {*}
     * @memberof AppPreSetRowItem
     */
    public rawItemDetail: any = {};

    /**
     * 直接内容类型
     *
     * @type {*}
     * @memberof AppPreSetRowItem
     */
    public contentType: any;

    /**
     * 构建前
     *
     * @memberof AppPreSetRowItem
     */
    public created() {
        this.handleCompMapping();
    }

    /**
     * 处理组件映射
     *
     * @memberof AppPreSetRowItem
     */
    public handleCompMapping() {
        switch (this.type) {
            case 'FIELD_IMAGE':
                this.handleDynaImg();
                break;
            case 'FIELD_CAROUSEL':
                this.handleDynaCarousel();
                break;
            case 'FIELD_TEXT_DYNAMIC':
                this.handleDynaText();
                break;
            case 'AUTH_LOGINMSG':
                this.handleDynaLoginMsg();
                break;
            default:
                console.warn(`${this.type}暂未支持`);
                break;
        }
    }

    /**
     * 处理动态图片
     *
     * @memberof AppPreSetRowItem
     */
    public handleDynaImg() {
        this.contentType = 'IMAGE';
    }

    /**
     * 处理动态轮播图
     *
     * @memberof AppPreSetRowItem
     */
    public handleDynaCarousel() {
        this.contentType = 'IMAGE';
        this.rawItemDetail = {
            predefinedType: 'STATIC_CAROUSEL',
        };
    }

    /**
     * 处理动态文本
     *
     * @memberof AppPreSetRowItem
     */
    public handleDynaText() {
        this.contentType = 'RAW';
        this.rawItemDetail = {
            renderMode: 'TEXT',
        };
    }

    /**
     * 处理登录信息
     *
     * @memberof AppPreSetRowItem
     */
    public handleDynaLoginMsg() {
        this.contentType = 'RAW';
        this.rawItemDetail = {
            renderMode: 'TEXT',
            predefinedType:'AUTH_LOGINMSG'
        };
    }

    /**
     * 绘制直接内容的值
     *
     * @memberof AppPreSetRowItem
     */
    get contentValue() {
        const data = this.contextData;
        let content = this.value;
        if (content && typeof this.value === 'string') {
            const items = content.match(/\{{(.+?)\}}/g);
            if (items) {
                items.forEach((item: string) => {
                    content = content.replace(/\{{(.+?)\}}/, eval(item.substring(2, item.length - 2)));
                });
            }
            content = content.replaceAll('&lt;', '<');
            content = content.replaceAll('&gt;', '>');
            content = content.replaceAll('&amp;nbsp;', ' ');
            content = content.replaceAll('&nbsp;', ' ');
        }
        return content;
    }
}
</script>

<style lang='less'>
@import './app-preset-rowitem.less';
</style>